<template>
  <el-dialog title="新增文章" :visible="showDialogAtr" @close="close">
    <el-form
      ref="formDate"
      inline
      label-width="120px"
      :model="formDate"
      :rules="formDateRules"
    >
      <el-form-item label="目录" prop="title">
        <el-input
          v-model="formDate.title"
          style="width: 570px"
          placeholder="请输入文章题目"
        ></el-input>
      </el-form-item>

      <el-form-item label="题干" prop="articleBody">
        <quill-editor v-model="formDate.articleBody" :options="editorOption" />
        <div v-html="data"></div>
      </el-form-item>

      <el-form-item label="解析视频">
        <el-input
          v-model="formDate.videoURL"
          placeholder="请输入视频地址"
          style="width: 570px"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="getaddArticle">确定提交</el-button>
        <el-button @click="close">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { addArticle, detailArticle, updateArticle } from "@/api/hmmm/articles";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

import quillConfig from "@/quill-config.js";
export default {
  components: {
    quillEditor,
  },
  props: {
    showDialogAtr: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      formDate: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      editorOption: quillConfig,
      data: "",
      formDateRules: {
        title: [{ required: true, message: "标题是必填项", trigger: "blur" }],
        articleBody: [
          { required: true, message: "内容是必填项", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getaddArticle() {
      await this.$refs.formDate.validate();
      if (!this.formDate.id) {
        await addArticle(this.formDate);
        this.$message({
          type: "success",
          message: '"新增成功"',
        });
        this.$emit("addReady");
        this.$emit("update:showDialogAtr", false);
      } else {
        await updateArticle(this.formDate);
        this.$message({
          type: "success",
          message: '"修改成功"',
        });
        this.$emit("addReady");
        this.$emit("update:showDialogAtr", false);
      }
    },
    close() {
      this.$emit("update:showDialogAtr", false);
      this.formDate = {
        title: "",
        articleBody: "",
        videoURL: "",
      };
    },

    async getDetailArticle(data) {
      const res = await detailArticle(data);
      this.formDate = res.data;
      this.formDate.id = data.id;
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.ql-editor) {
  height: 150px;
}
</style>
